<template>
<div class="co-document-page">
    <div ref="elToolbar" class="co-el-toolbar">
        <el-form :model="params">
            <div class="co-toolbar co-box-row">
                <el-date-picker 
                    type="datetimerange" 
                    value-format="X" 
                    :editable="false" 
                    v-model="params.range" 
                    :shortcuts="timeshortcuts"
                    range-separator="至" 
                    start-placeholder="开始日期" 
                    end-placeholder="结束日期" 
                    size="default" 
                    :clearable="false"
                    @change="onChange"
                ></el-date-picker>
                <el-form-item label="操作员:" size="default">
                    <el-select v-model="params.operator_uid" style="max-width: 7rem;">
                        <el-option :value="-1" label="全部"></el-option>
                        <el-option v-for="item in accounts" :key="item.id" :value="item.id" :label="item.realname ?? item.username"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单据类型:" size="default">
                    <el-select v-model="params.document_type" style="max-width: 7rem;">
                        <el-option :value="-1" label="全部"></el-option>
                        <template v-for="item in dt">
                            <el-option :value="item.value" :label="item.text"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付方式:" size="default">
                    <el-select v-model="params.settle_mode" style="max-width: 5.5rem;">
                        <el-option :value=-1 label="全部"></el-option>
                        <template v-for="item in sm">
                            <el-option :value="item.value" :label="item.text"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="显示方式:" size="default">
                    <el-select v-model="params.show_mode" style="max-width: 5.5rem;">
                        <el-option :value="0" label="按单据"></el-option>
                        <el-option :value="1" label="按商品"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="input-no" label="单据号:" size="default">
                    <el-input v-model="params.document_no" placeholder="单据号" ></el-input>
                </el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
            </div>
        </el-form>
    </div>
    <el-table :data="data" :height="h">
        <el-table-column prop="document_no" label="单据号" :width="250"></el-table-column>
        <el-table-column prop="operator_uid" label="操作员">
            <template #default="scope">
                <span>{{acd[scope.row.operator_uid]?.realname ?? acd[scope.row.operator_uid]?.username}}</span>
            </template>
        </el-table-column>
        <el-table-column v-if="show_mode==1" prop="goods_name" label="商品名称"></el-table-column>
        <el-table-column v-if="show_mode==1" prop="num" label="数量" :width="84" align="right"></el-table-column>
        <el-table-column prop="amount" label="金额" align="right" :width="100" :formatter="rmbFormatter"></el-table-column>
        <el-table-column prop="settle_mode" label="支付方式" align="center" :width="80">
            <template #default="scope">
                <span :class="['el-tag', 'el-tag--light', 'el-tag--' + smD[scope.row.settle_mode].theme]">
                    <span class="el-tag__content">{{ smD[scope.row.settle_mode].text }}</span>
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="document_type" label="单据类型" align="center" :width="120">
            <template #default="{row}">
                <span :class="['el-tag', 'el-tag--light', 'el-tag--' + dtD[row.document_type].theme]">
                    <span class="el-tag__content">{{ dtD[row.document_type].text }}</span>
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="createtime" label="时间" align="center" :formatter="dateFormatter" :width="140"></el-table-column>
        <el-table-column label="操作" :width="96">
            <template #default="{row}">
                <el-button size="small" type="primary" @click="onViewDocument(row)">详情...</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="ui-pagination-ctn box-row">
        <div class="flex"></div>
        <el-pagination
            v-model:current-page="params.page" :page-size="params.limit" :page-sizes="[23, 50, 100, 200]"
            layout="sizes, total, prev, pager, next" :total="total" 
            @size-change="onPageSizeChange" @current-change="onPageChange"
        ></el-pagination>
    </div>
</div>
</template>
<script>
import { ref, computed, reactive, toRefs } from 'vue';
import {useElementSize} from '@vueuse/core';
import { dateFormat, dict, rmbFormat, timeShortcuts,dt, dtD, sm,smD } from '../../uiframe/utils';
import { UIMode } from '../../uiframe/services/session';
import { useSocket } from '../../uiframe/services/socket';
import { ElMessage } from 'element-plus';
import { UiShowDialog } from '../../uiframe/layout/components/CompFactory.vue';
import DocumentDetailDialog from './dialog/DocumentDetailDialog.vue';
export default {
    setup(props){
        
        let elToolbar = ref(null),
        onmessage = (msg)=>ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }),
        data = reactive({
            params:{
                range: timeShortcuts(['1m'])[0].value.map(v=>Math.floor(v / 1000)),
                operator_uid: -1,
                document_type:-1,
                settle_mode:-1,
                show_mode:0,
                page:1,limit:19,
            },
            isDisabledDate:false,
            show_mode:0,
            accounts:[], acd:{},
            defaulttime: [new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 1, 1, 23, 59, 59)],
            timeshortcuts:computed(()=>{
                return timeShortcuts(['cd', 'pd', '7d', '15d', 'cw', 'pw', 'cm', 'pm','3m'])
            }),
            tbsize: useElementSize(elToolbar),
            h:computed(()=>{
//                console.log('data.tbsize.height = '+data.tbsize.height)
                return UIMode.mh.value - (data.tbsize.height + 34)
            }),
            total:0,
            data:[]
        }),
        load = ()=>{
            if(data.loading)return;
            data.loading = true;
            useSocket().then(socket=>{
                data.params.range = data.params.range.map(v=>v = parseInt(v));
                socket.rpc('document.read', data.params).then(res=>{
                    data.loading = false;
                    data.show_mode = data.params.show_mode;
                    data.data = res.data.data;
                    data.total = res.data.total;
                }).catch(res=>{
                    data.loading = false;
                    onmessage(res);
                })
            })
        };
        load();
        useSocket().then(socket=>socket.rpc('accounts',{}).then(res=>{
            data.accounts = res.data.data
            data.acd = dict(res.data.data, 'id')
        }).catch(res=>onmessage(res)));
        const methods = {
            onSearch:()=>load(),
            onChange: (v)=>{
                //data.params.range = v.map(i=>i = 0 + i)
            },
            onPageChange:()=>load(),
            onPageSizeChange:(size)=>{
                data.params.limit = size;
                load();
            },
            onViewDocument:(row)=>{
                UiShowDialog(DocumentDetailDialog, {document:row}).then(res=>{
                    console.log('res = ', res)
                }).catch(err=>{
                    console.log('err = ', err)
                })
            },
            dateFormatter:(r,c,v)=>dateFormat(v, 'Y-M-D h:m'),
            rmbFormatter:(r,c,v)=>rmbFormat(v,2)
        }
        return {
            elToolbar,
            ...toRefs(data),
            ...methods,
            dt, dtD, sm, smD
        }
    }
}
</script>
<style lang="scss">
.co-document-page{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
</style>
